import $ from 'jquery'

// app1
const $button1 = $('#add1')
const $button2 = $('#minus1')
const $button3 = $('#mul2')
const $button4 = $('#divide2')
const $number = $('#number')
const n = localStorage.getItem('n')
$number.text(n || 100)

$button1.on('click', () => {
  let n = parseFloat($number.text()) //parseFloat(string, radix)解析一个字符串并返回指定基数的浮点数
  n += 1
  localStorage.setItem('n', n)
  $number.text(n)
})

$button2.on('click', () => {
  let n = parseFloat($number.text())
  n -= 1
  localStorage.setItem('n', n)
  $number.text(n)
})

$button3.on('click', () => {
  let n = parseFloat($number.text())
  n *= 2
  localStorage.setItem('n', n)
  $number.text(n)
})

$button4.on('click', () => {
  let n = parseFloat($number.text())
  n = n / 2
  localStorage.setItem('n', n)
  $number.text(n)
})

// app2

const $tabBar = $('#app2 .tab-bar')
const $tabContent = $('#app2 .tab-content')

$tabBar.on('click', 'li', (e) => {
  const $li = $(e.currentTarget)
  const index = $li.index()

  $li.addClass('selected')
    .siblings()
    .removeClass('selected')

  $tabContent.children()
    .eq(index).addClass('active')
    .siblings().removeClass('active')
})

$tabBar.children().eq(0).trigger('click') //触发自动触发click事件

// app3

const $square = $('#app3 .square')

$square.on('click', () => {
  $square.toggleClass('active')
})

// app4
const $circle = $('#app4 .circle')
$circle.on('click', () => {
  $circle.addClass('active')
}).on('mouseleave', () => {
  $circle.removeClass('active')
})
